<template>
  <div ref="ChartYali" id="ChartYali" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { defineProps, onMounted} from 'vue';
const props = defineProps({
    pressdata: {
        type: Array,
        default: () => [500]
    }
});

let xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'qwe'];
let ydata = [820, 932, 901, 934, 1290, 1330, 1320,1234];




onMounted(() => {
  var chartDom = document.getElementById('ChartYali');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    grid: {
    left: '1%',
    right: '1%',
    bottom: '1%',
    top: '5%',
    containLabel: true
  },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'qwe']
    },
    yAxis: {
      type: 'value',
      splitLine: {
      show: false  // 隐藏 y 轴的网格线
    }
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320,1234],
        type: 'line',
        smooth: true,
        areaStyle: {}
      }
    ]
  };

  option && myChart.setOption(option);

  setInterval(function () {
    const now = new Date();
    xdata.shift();
    xdata.push([
        now.getHours().toString().padStart(2, '0'),
        now.getMinutes().toString().padStart(2, '0'),
        now.getSeconds().toString().padStart(2, '0')
      ].join(':'));
    ydata.shift();
    ydata.push(props.pressdata[0]);
    
    myChart.setOption({
      xAxis: {
        data: xdata
      },
      series: [
        {
          data: ydata
        }
      ]
    });
  }, 2000);
});
</script>
